<template>
	<view class="month-picker">
		<view class="picker-mask" @click.stop="close()" v-if="pickerShow"></view>
		<view class="picker-content" :class="{'picker-show':pickerShow}">
			<view class="picker-header">
				<view class="picker-cancel" @click="close">取消</view>
				<view class="picker-confirm" @click="pickerConfirm">确定</view>
			</view>
			<picker-view class="picker-view" indicator-class="picker-view-selected-three" :value="value"
				@change="pickerViewChangeTwo">
				<picker-view-column>
					<view class="picker-item" v-for="(item,index) in years" :key="index">{{item.name}}</view>
				</picker-view-column>
				<picker-view-column>
					<view class="picker-item" v-for="(item,index) in months" :key="index">{{item.name}}</view>
				</picker-view-column>
			</picker-view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "diy-month-picker",
		data() {
			return {
				years: [],
				months: [],
				pickerShow: false,
				value: [0, 0],
				monthValue: []
			};
		},
		methods: {
			show() {
				this.pickerShow = true;
			},
			close() {
				this.pickerShow = false;
			},
			pickerConfirm() {
				let data = [this.years[this.value[0]].value, this.months[this.value[1]].value].join('-');
				this.$emit('onConfirm', data);
				this.close();
			},
			pickerViewChangeTwo(e) {
				this.value = e.detail.value;
			},
			getMonths() {
				let months = []
				for (let i = 1; i <= 12; i++) {

					months.push({
						name: i + '月',
						value: i
					})
				}
				return months;
			},
			getYears() {
				let today = new Date();
				let start = today.getFullYear();
				let years = [];
				for (let y = 0; y < 50; y++) {
					let year = start - y;
					years.push({
						name: year + '年',
						value: year
					})
				}
				return years;
			}
		},
		mounted() {
			this.years = this.getYears();
			this.months = this.getMonths();
		}
	}
</script>

<style lang="scss" scoped>
	@mixin flex($justify:center, $align:center, $direction:row) {
		display: flex;
		justify-content: $justify;
		align-items: $align;
		flex-direction: $direction;
	}

	.month-picker {
		.picker-mask {
			position: fixed;
			left: 0;
			top: 0;
			z-index: 100;
			width: 100vw;
			height: 100vh;

			background-color: rgba($color: #000000, $alpha: 0.5);
		}

		.picker-content {
			width: 100%;
			height: 500rpx;
			background-color: #fff;
			position: fixed;
			left: 0;
			bottom: 0;
			z-index: 100;
			transform: translateY(100%);
			transition: all 200ms ease;

			&.picker-show {
				transform: translateY(0) !important;
			}
		}

		.picker-header {
			@include flex(space-between);

			.picker-cancel,
			.picker-confirm {
				padding: 32rpx;
				font-size: 28rpx;
				color: #999;
			}

			.picker-confirm {
				color: #333;
			}
		}

		.picker-view {
			width: 100%;
			height: 500upx;

			.picker-item {
				width: 100%;
				height: 34px;
				line-height: 34px;
				font-size: 15px;
				font-weight: 600;
				display: block;
				text-align: center;
				color: #666;
			}

			.picker-view-selected-one,
			.picker-view-selected-two,
			.picker-view-selected-three {
				height: 68upx;
				line-height: 68upx;
				border-top: #1AAD19 1upx solid;
				border-bottom: #1AAD19 1upx solid;
			}

			.picker-view-selected-one {
				position: relative;
				left: 25%;
				width: 50%;
			}

			.picker-view-selected-two {
				position: relative;
				left: 15%;
				width: 70%;
			}

			.picker-view-selected-three {
				position: relative;
				left: 5%;
				width: 90%;
			}
		}

	}
</style>
